<template>
  <a-card :bordered="false" style="width: 100%">
    <!-- 自定义顶部搜索 -->
    <template #title>
      <div style="display: flex">
        <a-row class="a-row-search" :gutter="16">
          <a-col :lg="8">
            <span>字典类型：</span>
            <a-input
              style="width: 200px"
              v-model:value="searchDictData.type"
              placeholder="字典类型"
            ></a-input>
          </a-col>
          <a-col :lg="8">
            <span>字典标签：</span>
            <a-input
              style="width: 200px"
              v-model:value="searchDictData.label"
              placeholder="字典标签"
            ></a-input>
          </a-col>
          <a-col :lg="8">
            <span>字典状态：</span>
            <a-select
              placeholder="字典状态"
              ref="select"
              v-model:value="searchDictData.status"
              style="width: 200px"
              @change="handleChange"
              :options="statusData"
            >
            </a-select>
          </a-col>
        </a-row>
        <div class="right-btn">
          <a-space :size="40">
            <a-button
              v-permission="`system:dict_data:query`"
              type="primary"
              :loading="saveLoading"
              @click="handleSearch"
              >查询</a-button
            >
            <a-button
              @click="handleReset"
              v-permission="`system:dict_data:reset`"
              >重置</a-button
            >
          </a-space>
        </div>
      </div>
    </template>

    <!-- 新增角色区域 -->
    <div style="height: 60px">
      <a-button
        type="primary"
        v-permission="`system:dict_data:add`"
        @click="handlerAddDictOpen"
      >
        <template #icon>
          <PlusCircleOutlined spin />
        </template>
        新增
      </a-button>
    </div>

    <!-- 角色表格数据 -->
    <a-table
      :scroll="{ x: 1300 }"
      :dataSource="tableData"
      :loading="loading"
      :pagination="false"
    >
      <a-table-column
        fixed="left"
        title="字典编号"
        dataIndex="id"
        :width="80"
      />
      <a-table-column title="字典类型" dataIndex="type" :width="140" />
      <a-table-column title="字典标签" dataIndex="label" :width="100" />
      <a-table-column title="字典键值" dataIndex="value" :width="100" />
      <a-table-column title="状态" dataIndex="status" :width="100">
        <template #default="{ record }">
          <a-switch
            v-model:checked="record.checked"
            @change="handleChangeStatus(record.id)"
          >
            <template #checkedChildren><check-outlined /></template>
            <template #unCheckedChildren><close-outlined /></template>
          </a-switch>
        </template>
      </a-table-column>
      <a-table-column title="备注" dataIndex="remark" :width="140" />
      <a-table-column title="创建时间" dataIndex="createTime" :width="140" />
      <a-table-column fixed="right" title="操作" :width="155">
        <template #default="{ record }">
          <a-button
            v-permission="`system:dict_data:update`"
            type="link"
            size="small"
            @click="handleEchoDict(record.id)"
          >
            <FormOutlined />
            修改
          </a-button>
          <a-popconfirm
            placement="bottom"
            ok-text="确认"
            cancel-text="取消"
            title="确认删除该字典数据？"
            @confirm="handleRemoveDict(record.id)"
          >
            <a-button
              type="link"
              danger
              size="small"
              v-permission="`system:dict_data:delete`"
            >
              <DeleteOutlined />
              删除
            </a-button>
          </a-popconfirm>
        </template>
      </a-table-column>
    </a-table>

    <!-- 分页 -->
    <div class="pagination-style">
      <a-pagination
        @change="handlePaginationChange"
        v-model:current="pageNo"
        :pageSize="pageSize"
        :total="total"
      />
    </div>
  </a-card>

  <!-- 新增、修改字典弹框 -->
  <a-modal
    @cancel="handlerCancel"
    v-model:open="addDictDataOpenModal"
    width="30%"
    :title="dictData.id === undefined ? '添加字典' : '修改字典'"
  >
    <a-form
      ref="formRef"
      :rules="rules"
      :model="dictData"
      :wrapper-col="wrapperCol"
      :labelCol="labelCol"
    >
      <a-form-item ref="type" label="字典类型" name="type">
        <a-input disabled placeholder="字典类型" v-model:value="dictData.type" />
      </a-form-item>
      <a-form-item ref="label" label="字典标签" name="label">
        <a-input placeholder="字典标签" v-model:value="dictData.label" />
      </a-form-item>
      <a-form-item ref="value" label="字典键值" name="value">
        <a-input type="number" placeholder="字典键值" v-model:value="dictData.value" />
      </a-form-item>
      <a-form-item ref="remark" label="字典备注" name="remark">
        <a-textarea
          show-count
          :maxlength="60"
          placeholder="字典备注"
          v-model:value="dictData.remark"
        />
      </a-form-item>
    </a-form>

    <template #footer>
      <a-button
        key="submit"
        type="primary"
        :loading="saveLoading"
        @click="handleSaveDict"
        >确定</a-button
      >
      <a-button key="back" @click="handlerCancel">取消</a-button>
    </template>
  </a-modal>
</template>

<script setup>
import { ref, onMounted } from "vue";
import { DICT_DATA_CONSTANT } from "@/constant/dictType.js";
import { message } from "ant-design-vue";
import { useRoute } from "vue-router";
import {
  addDictData,
  updateDict,
  findDictList,
  updateDictStatus,
  removeDict,
  echoDict,
  queryDictLabel,
  batchDelete,
} from "@/api/dict_data";

const route = useRoute();
const statusData = ref([]);
const tableData = ref([]);
const loading = ref(true);
const saveLoading = ref(false);
const pageNo = ref(1);
const pageSize = ref(10);
const total = ref(0);
const searchDictData = ref({
  label: "",
  type: "",
  status: null,
});
searchDictData.value.type = route.query.type;
const addDictDataOpenModal = ref(false);
const dictData = ref({});

onMounted(() => {
  getDictList();
  getDictTypeStatus();
});

//获取字典类型分页数据
const getDictList = () => {
  findDictList(pageNo.value, pageSize.value, searchDictData.value).then(
    (res) => {
      if (res.code === 200 && res.data !== null) {
        tableData.value = res.data.data;
        total.value = res.data.total;
        loading.value = false;
      } else {
        loading.value = false;
        tableData.value = [];
      }
    }
  );
};

//监听分页变化
const handlePaginationChange = (current, page) => {
  pageNo.value = current;
  pageSize.value = page;
  getDictList();
};
//查询字典状态
const getDictTypeStatus = () => {
  queryDictLabel(DICT_DATA_CONSTANT).then((res) => {
    if (res.code === 200) {
      statusData.value = res.data;
    }
  });
};

//重置
const handleReset = () => {
  searchDictData.value = {
    label: "",
    type: "",
    status: null,
  };
  getDictList();
};

//查询
const handleSearch = () => {
  if (
    searchDictData.value.label !== "" ||
    searchDictData.value.type !== "" ||
    searchDictData.value.status !== null
  ) {
    getDictList();
  }
};

//新增弹框
const handlerAddDictOpen = () => {
  addDictDataOpenModal.value = true;
  dictData.value.type = route.query.type;
};

//新增、修改提交
const handleSaveDict = () => {
  formRef.value.validate().then(() => {
    if (dictData.value.id === undefined) {
      handlerAdd();
    } else {
      handlerEdit();
    }
  });
};

//新增字典数据
const handlerAdd = () => {
  addDictData(dictData.value).then((res) => {
    if (res.code === 200) {
      message.success("新增成功！");
      getDictList();
      addDictDataOpenModal.value = false;
      dictData.value = {};
    }
  });
};

//修改字典数据
const handlerEdit = () => {
  updateDict(dictData.value).then((res) => {
    if (res.code === 200) {
      message.success("修改成功！");
      getDictList();
      addDictDataOpenModal.value = false;
      dictData.value = {};
    }
  });
};

//修改字典数据回显
const handleEchoDict = (id) => {
  echoDict(id).then((res) => {
    if (res.code === 200) {
      dictData.value = res.data;
      addDictDataOpenModal.value = true;
    }
  });
};
//修改字典状态
const handleChangeStatus = (id) => {
  updateDictStatus(id).then((res) => {
    if (res.code === 200) {
      message.success("修改成功！");
      getDictList();
    }
  });
};

//删除字典
const handleRemoveDict = (id) => {
  removeDict(id).then((res) => {
    if (res.code === 200) {
      message.success("删除成功！");
      getDictList();
    }
  })
}

const handlerCancel = () => {
  addDictDataOpenModal.value = false;

  dictData.value = {};
};

const labelCol = {
  span: 6,
};
const wrapperCol = {
  span: 16,
};

const formRef = ref();
const rules = ref({
  label: [
    {
      required: true,
      message: "请输入字典标签",
      trigger: "change",
    },
  ],
  value: [
    {
      required: true,
      message: "请输入字典键值",
      trigger: "change",
    },
  ],
  remark: [
    {
      required: true,
      message: "请输入字典备注",
      trigger: "change",
    },
  ],
  type: [
    {
      required: true,
      message: "请输入字典类型",
      trigger: "change",
    },
  ],
});
</script>
<style scoped lang='scss'>
.permisson-role {
  height: 80px;
  width: 100%;
  display: flex;
  align-items: center;
  margin-bottom: 20px;
}

.a-row-search {
  height: 100px;
  width: 85%;
  display: flex;
  align-items: center;
}

.pagination-style {
  height: 120px;
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}

.right-btn {
  width: 15%;
  display: flex;
  align-items: center;
  justify-content: flex-end;
}
</style>